<template>
    <!-- pages/myincome/index.wxml -->
    <view>
        <view class="incomebox1">
            <view class="earningsbox">
                <view class="payroll">
                    <view class="text1">待发放收益</view>
                    <view class="text2">
                        <text>¥</text>
                        <text>{{ recommentObj.momentumReturns }}</text>
                    </view>
                </view>
                <view class="h-x"></view>
                <view class="payroll">
                    <view class="text1">已发放收益</view>
                    <view class="text2">
                        <text>¥</text>
                        <text>{{ recommentObj.incometotal }}</text>
                    </view>
                </view>
            </view>
            <view class="detailbox">
                <view class="flexbox-sb centers box1" @tap="toIncomedetails">
                    <view class="centers">
                        <image class="icon-40 mr-10" :src="imgUrl + 'wallet.png'"></image>
                        <text class="box1text1">最近收益</text>
                    </view>
                    <view class="centers">
                        <text class="box2text5">查看明细</text>
                        <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                    </view>
                </view>
                <view class="flexbox-sb box2" v-if="IncomeInfoList.length > 0" v-for="(item, index) in IncomeInfoList" :key="index">
                    <view class="centers">
                        <view class="mr-30">
                            <image class="imgs" :src="item.headPic"></image>
                        </view>
                        <view>
                            <view class="box2text1">{{ item.name ? item.name : '暂无昵称' }}</view>
                            <view class="box2text4">{{ item.remark }}</view>
                            <view>
                                <text class="box2text2">{{ item.time }}</text>
                                <!-- <text class="box2text2">12:00:03</text> -->
                            </view>
                        </view>
                    </view>

                    <view>
                        <view class="box2text3">{{ item.income }}</view>
                        <!-- <view class="box2text5">已发放</view> -->
                        <view class="box2text6">{{ item.description }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="incomebox2">
            <view class="flexbox-sb recombox" @tap="toRecom" :data-item="item" v-for="(item, index) in recomList" :key="index">
                <view class="centers">
                    <view class="centers mr-10">
                        <image class="icon-40" :src="imgUrl + item.img"></image>
                    </view>
                    <view class="recomtext1">
                        {{ item.title }}
                        <text>（{{ item.recommendnumber }}{{ item.unit }}）</text>
                    </view>
                </view>

                <view class="centers recomtext2">
                    <text>累计收益：¥{{ item.incomeall }}</text>
                    <image class="icon-40" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
            <view class="flexbox-sb recombox" @tap="onStoreAll">
                <view class="recomtext1">门店销售创客大礼包统计</view>
                <view class="centers">
                    <text class="centers recomtext2">{{ count }}张</text>
                    <image class="icon-32" :src="imgUrl + 'right.png'"></image>
                </view>
            </view>
        </view>
        <view class="referrer flexbox-sb" @tap="parseEventDynamicCode($event, referrer == null ? 'toReferrer' : '')">
            <view class="referrertext1">推荐人：</view>
            <view v-if="referrer == null" class="centers">
                <text class="referrertext2">您暂无推荐人，去绑定</text>
                <image class="icon-40" :src="imgUrl + 'right.png'"></image>
            </view>
            <view v-if="referrer">
                <text class="referrertext2">{{ referrer.nickName }}</text>
            </view>
        </view>
    </view>
</template>

<script>
// pages/myincome/index.js
const app = getApp(); // 引入app

import _request from '../../utils/request.js';
import { getTime } from '../../utils/util.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            recomList: [],

            recommentObj: null,
            IncomeInfoList: [],
            count: 0,
            total: 0,

            referrer: {
                nickName: ''
            },

            countClone: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            total: options.count || 0
        });
        this.onQuery(); // 获取我的推荐数量

        _request
            .postObj('/recomUser/recommendInfo', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    recomList: res.data.data.incomeList.map((item) => {
                        if (item.roletype == 1) {
                            item.title = '门店';
                            item.img = '/static/pages/myincome/referrer1.png';
                            item.unit = '家';
                            return item;
                        } else if (item.roletype == 2) {
                            item.title = '美发师';
                            item.img = '/static/pages/myincome/referrer2.png';
                            item.unit = '个';
                            return item;
                        } else if (item.roletype == 3) {
                            item.title = '用户';
                            item.img = '/static/pages/myincome/referrer3.png';
                            item.unit = '个';
                            return item;
                        } else if (item.roletype == 4) {
                            item.title = '创客卡';
                            item.img = '/static/pages/myincome/referrer4.png';
                            item.unit = '张';
                            return item;
                        }
                    }),
                    recommentObj: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 收益列表

        this.getIncomeInfo();
        this.onQuery();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取我的推荐人
        _request
            .get('/recomUser/findInvite', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    referrer: res.data.data
                });
            })
            .catch((error) => {
                console.log(error);
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 前往绑定推荐人
        toReferrer() {
            uni.navigateTo({
                url: '/pages/myincome/referrer/index'
            });
        },

        // 前往收益详细
        toIncomedetails() {
            uni.navigateTo({
                url: '/pages/myincome/incomedetails/index'
            });
        },

        //门店总售卡
        onStoreAll() {
            uni.navigateTo({
                url: '/pages/myincome/makerincome/storetotal/index?count=' + this.count
            });
        },

        // 前往对应收益页
        toRecom(e) {
            const { roletype } = e.currentTarget.dataset.item;

            if (roletype == 1) {
                uni.navigateTo({
                    url: '/pages/myincome/storeincome/index'
                });
            } else if (roletype == 2) {
                uni.navigateTo({
                    url: '/pages/myincome/hairincome/index'
                });
            } else if (roletype == 3) {
                uni.navigateTo({
                    url: '/pages/myincome/userincome/index'
                });
            } else if (roletype == 4) {
                uni.navigateTo({
                    url: '/pages/myincome/makerincome/index'
                });
            }
        },

        // 收益列表 获取三条
        getIncomeInfo() {
            _request
                .postObj('/recomUser/recommendIncomeInfoByUserId', {
                    userId: uni.getStorageSync('userid'),
                    page: 1,
                    pageSize: 3,
                    month: '',
                    status: 0,
                    type: 0
                })
                .then((res) => {
                    if (res.data.data.length > 0 && res.data.data) {
                        this.setData({
                            IncomeInfoList: res.data.data.map((item) => {
                                item.time = getTime(item.time, 1);
                                return item;
                            })
                        });
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },

        //门店统计
        onQuery() {
            _request
                .get('/store/getStoreCardSum', {
                    userId: uni.getStorageSync('userid'),
                    startDay: '',
                    endDay: ''
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        console.log(res.data.data);
                        this.setData({
                            count: res.data.data || 0
                        });
                    } else {
                        // wx.showToast({
                        //   title: res.data.message || '查询失败!',
                        //   icon: 'error'
                        // })
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        }
    }
};
</script>
<style>
/* pages/myincome/index.wxss */
page {
    padding-bottom: 50rpx;
}

/* 收益 */
.incomebox1 {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 20rpx auto;
}

.earningsbox {
    width: 670rpx;
    height: 220rpx;
    background: #ffffff;
    position: relative;
    padding: 40rpx 0;
    box-sizing: border-box;
    display: flex;
    margin: 0 auto;
    border-bottom: 1px solid #ededed;
}

.payroll {
    width: 50%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: center;
    height: 100%;
}

.h-x {
    width: 1px;
    height: 100rpx;
    background-color: #eeeeee;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.text1 {
    width: 100%;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    text-align: center;
}

.text2 {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 50rpx;
}

.text2 text:nth-child(2) {
    font-size: 36rpx;
}

/* 明细 */
.detailbox {
    width: 710rpx;
    padding: 0 20rpx 0rpx 20rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
}

.box1 {
    height: 124rpx;
    border-bottom: 1px solid #ededed;
}

.box1text1 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
}

.box2 {
    height: 184rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.box2text1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.box2text3 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 50rpx;
}

.box2text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.box2text5 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.box2text6 {
    white-space: nowrap;
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff4122;
    line-height: 34rpx;
    text-align: right;
}

.imgs {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

/* 区别收益 */

.incomebox2 {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 20rpx auto;
}

.recombox {
    border-bottom: 1px solid #ededed;
    align-items: center;
    height: 100rpx;
    padding: 0 20rpx;
}

.recomtext1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.recomtext2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

/* 推荐人 */
.referrer {
    width: 710rpx;
    height: 100rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 0 auto;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.referrertext1 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 100rpx;
}

.referrertext2 {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 100rpx;
}
</style>
